import { defineComponent, reactive, onMounted } from 'vue'
import { ElCard, ElTable, ElTableColumn, ElSwitch, ElPagination, ElMessage } from 'element-plus'
import { useStore } from 'vuex'

export default defineComponent(function MonitorPoliceSet() {
  const store = useStore()
  const formValues = reactive({
    current: 1,
    size: 15
  })
  const state = reactive({
    list: [],
    total: 0
  })
  //  列表数据
  const index = async () => {
    try {
      const { data } = await store.dispatch('manholes/ManholeAlarmConfigGet', formValues)
      data.records.forEach((item: any) => {
        item.autoIgnore = 0
      })
      state.list = data.records
      state.total = data.total
    } catch (error) {}
  }
  //  每页数量
  const onSizeChange = (value: any) => {
    formValues.size = value
    index()
  }
  //  分页
  const onCurrentChange = (value: any) => {
    formValues.current = value
    index()
  }
  //  是否自动忽略
  const autoIgnoreSwitchChange = async (value: number, row: any) => {
    const params = {
      id: row.id,
      autoIgnore: value,
      enabled: row.enabled
    }
    updateAjax(params)
  }
  //  是否自动推送工单
  const pushOrderSwitchChange = async (value: number, row: any) => {
    const params = {
      id: row.id,
      pushOrder: value
    }
    updateAjax(params)
  }
  //  使用状态
  const enabledSwitchChange = async (value: number, row: any) => {
    const params = {
      id: row.id,
      autoIgnore: row.autoIgnore,
      enabled: value
    }
    updateAjax(params)
  }
  //  更新请求
  const updateAjax = async (params: any) => {
    try {
      await store.dispatch('manholes/ManholeAlarmConfigUpdateGet', params)
      index()
      ElMessage({ type: 'success', message: '操作成功' })
    } catch (error) {}
  }
  onMounted(() => {
    index()
  })

  return () => (
    <ElCard>
      <ElTable data={state.list}>
        <ElTableColumn prop="alarmName" label="警报名称" />
        <ElTableColumn
          prop="deviceTarget"
          label="警报对象"
          v-slots={{
            default: (scope: any) => (
              <span>
                {scope.row.deviceTarget === '1' && '系统'}
                {scope.row.deviceTarget === '2' && '监控箱'}
                {scope.row.deviceTarget === '3' && '监控箱回路'}
                {scope.row.deviceTarget === '4' && '单灯控制器'}
              </span>
            )
          }}
        />
        <ElTableColumn
          prop="alarmType"
          label="警报类型"
          v-slots={{
            default: (scope: any) => (
              <span>
                {scope.row.alarmType === 1 && '系统警报'}
                {scope.row.alarmType === 2 && '设备主动报警'}
                {scope.row.alarmType === 3 && '自定义报警'}
              </span>
            )
          }}
        />
        <ElTableColumn
          prop="autoIgnore"
          label="是否自动忽略"
          v-slots={{
            default: (scope: any) => (
              <ElSwitch
                active-value={1}
                inactive-value={0}
                v-model={scope.row.autoIgnore}
                onChange={(value: any) => autoIgnoreSwitchChange(value, scope.row)}
              />
            )
          }}
        />
        <ElTableColumn
          prop="enabled"
          label="使用状态"
          v-slots={{
            default: (scope: any) => (
              <ElSwitch
                active-value={1}
                inactive-value={0}
                v-model={scope.row.enabled}
                onChange={(value: any) => enabledSwitchChange(value, scope.row)}
              />
            )
          }}
        />
        <ElTableColumn
          prop="pushOrder"
          label="是否自动推送工单"
          v-slots={{
            default: (scope: any) => (
              <ElSwitch
                active-value={1}
                inactive-value={0}
                v-model={scope.row.pushOrder}
                onChange={(value: any) => pushOrderSwitchChange(value, scope.row)}
              />
            )
          }}
        />
      </ElTable>
      <div style="height: 10px;"></div>
      <ElPagination
        v-model:currentPage={formValues.current}
        v-model:pageSize={formValues.size}
        layout="total, sizes, prev, pager, next, jumper"
        background={true}
        small={true}
        total={state.total}
        onSize-change={onSizeChange}
        onCurrent-change={onCurrentChange}
      />
    </ElCard>
  )
})
